<template>
  <div class="student_container">
    <div class="ledger_warp">
      <div class="ledger_table">
        <div class="ledger_title">科目：1001 库存现金</div>
        <el-table :data="tableData">
          <el-table-column prop="date" label="资产" width="180">
          </el-table-column>
          <el-table-column prop="name" label="行次" width="180">
          </el-table-column>
          <el-table-column prop="address" label="期末余额">
          </el-table-column>
          <el-table-column prop="date" label="年初余额" width="180">
          </el-table-column>
          <el-table-column prop="name" label="负债和所有者权益" width="180">
          </el-table-column>
          <el-table-column prop="date" label="行次" width="180">
          </el-table-column>
        </el-table>
      </div>
      <div class="ledger_menu">
        <div class="ledger_menu_title">快速切换</div>
        <div class="ledger_search"><input type="text"><i class="el-icon-search"></i></div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo zsh-menu" @open="handleopen"
          @close="handleclose" @select="handleselect" router>
          <template v-for="(item,index) in collapseLost">
            <el-submenu :index="index+''" v-if="item&&item.children">
              <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
              <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden"
                @click="clickItem(child)">
                {{child.name}}
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.path" @click="clickItem(item)"><i :class="item.iconCls"></i>{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import CloudSystem from '@/router/cloudSystem.js'
  export default {
    provide() {
      return {
        reload: this.reload,
      };
    },
    name: "projectDetails",
    data() {
      return {
        collapseLost: CloudSystem,
        tableData: []
      };
    },
    mounted() {},
    components: {
      // commonHeader,
      // asideNav,tags
    },
    computed: {
      ...mapGetters({
        dynamicTags: ["dynamicTags"],
        // userInfo: ["userInfo"],
        // personalDetails: ["personalDetails"],
      }),
    },
    created() {
      console.log('assets')
    },
    methods: {
      handleselect(key, keyPath) {
        // // console.log(key);
        // // console.log(keyPath);
        // // return
        // this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // // console.log("child******", child)
        // let tags = this.dynamicTag.some((item) => {
        //   return item.path == key;
        // })
        // if (tags) {
        //   this.$router.push({
        //     path: key
        //   });
        // } else {
        //   // console.log("88888888")
        //   this.dynamicTag.push(child);
        //   this.$router.push({
        //     path: key
        //   });
        //   let arr = JSON.parse(JSON.stringify(this.dynamicTag));
        //   this.$store.commit(this.$types.DYNAMICTAGS, arr);
        // }
      },
      handleopen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleclose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickItem(child) {
        this.actvieItem = child.path;
        this.actvieName = child.name;
        this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // console.log("child******", child)
        let tags = this.dynamicTag.some((item) => {
          return item.path == child.path;
        })
        if (tags) {
          this.$router.push({
            path: child.path
          });
        } else {
          // console.log("88888888")
          this.dynamicTag.push(child);
          this.$router.push({
            path: child.path
          });
          let arr = JSON.parse(JSON.stringify(this.dynamicTag));
          this.$store.commit(this.$types.DYNAMICTAGS, arr);
        }
        // console.log(this.dynamicTags)
        // if (this.dynamicTags.length == 1) {
        //   this.actvieItem = this.dynamicTags[0].path;
        // }
      },
    },
    watch: {

    }
  };
</script>

<style lang="less" scoped="scoped">
  .ledger_warp {
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    height: 100%;

    .ledger_table {
      flex: 1;
      min-width: 0;
      border: 1px solid #DCE0E3;
      border-radius: 4px;

      .ledger_title {
        height: 64px;
        line-height: 64px;
        padding-left: 35px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      /deep/.el-table {
        &::before {
          display: none;
        }

        thead {
          th {
            background-color: #F6F7F9;
            color: #666666;
            font-weight: normal;
          }
        }
      }
    }

    .ledger_menu {
      width: 305px;
      height: 100%;
      border: 1px solid #DCE0E3;
      margin-left: 10px;
      /deep/.el-menu {
        border: none;

        .el-menu-item,
        .el-submenu__title {
          height: 36px;
          line-height: 36px;
        }

        .is-opened {
          background: #F3F8FF;
        }
      }
      .ledger_menu_title {
        height: 64px;
        line-height: 64px;
        padding-left: 17px;
        box-sizing: border-box;
        border-bottom: 1px solid #DCE0E3;
      }

      .ledger_search {
        width: 267px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #DCE0E3;
        margin: 19px;
        box-sizing: border-box;
        position: relative;

        input {
          outline: none;
          border: none;
          width: 90%;
          height: 100%;
          padding-left: 5px;
          box-sizing: border-box;
        }

        i {
          position: absolute;
          right: 7px;
          top: 7px;
          cursor: pointer;
        }
      }
    }
  }
</style>
